import React 			from 'react';
import { Link }			from 'react-router-dom'
import PageTitle    	from 'component/pagetitle/index.jsx';
import Pagination 		from 'util/pagination/index.jsx';
import MUtil        	from 'util/mm.jsx'
import Product         	from 'service/product-service.jsx';
import TableView		from 'component/tableview/index.jsx';
import ListSearch		from 'util/index-list-search/index.jsx';
import './index.scss';

const _util 			= new MUtil();
const _product 			= new Product();
class ProductList extends React.Component{
	
	constructor(props){
		super(props);
		this.state = {
			 pageNum  : 1,
			 list     : [],
			 listType : 'list'
		}
	}
	
	componentDidMount(){
		this.loadProductList();
	}
	
	loadProductList(){
		let listParam = {};
		listParam.pageNum = this.state.pageNum;
		listParam.listType = this.state.listType;
		if (this.state.listType === 'search') {
			listParam.searchType = this.state.searchType;
			listParam.searchKeyWord = this.state.searchKeyWord;
		}
		
		_product.getProductList(listParam)
			.then(res => {
				this.setState(res);
			},err =>{
				_util.errorTips(err);
			})
	}
	
	//改变商品状态
	onSetProducrStatus(curProductId,curStatus){
		const newStatus 	= curStatus === 1 ? 2 :1;
		const confirmTips 	= curStatus === 1 ? '是否下架该商品' :'是否上架商家该商品';
		if(window.confirm(confirmTips)){
			_product.setProductStatus(curProductId,newStatus)
					.then(res => {
						_util.successTips(res);
						this.loadProductList();
					},errMsg =>{
						_util.errorTips(errMsg);
					})
		}
		
	}
	onChangePagination(page){
		this.setState({
			pageNum: page,
		},() => {
			this.loadProductList();
		});
	}
	
	onSearch(type,keyWord){
		this.setState({
			searchType:type,
			searchKeyWord:keyWord,
			listType:'search'
		},() => {
			this.loadProductList();
		});
	}
	
	render(){
		const optionalType = [{name:'按商品ID查询',value:'productId'},
							  {name:'按商品名称查询',value:'productName'}]
		const tbodyList = this.state.list.map((product,index) => {
			return (
				<tr key={index}>
					<td>{product.id}</td>
					<td>
						<p>{product.name}</p>
						<p>{product.subtitle}</p>
					</td>
					<td>{product.price}</td>
					<td>
						<span>{product.status === 2 ? '已下架' : '在售'}</span>&nbsp;
						<button className="btn btn-warning btn-xs" 
								onClick={() => {this.onSetProducrStatus(product.id,product.status)}}>
							{product.status === 2 ? '上架' : '下架'}
						</button>
					</td>
					<td className="text-center">
						<Link className='opear' to={`/product/detail/${product.id}`}>详情</Link>
						<Link className='opear' to={`/product/save/${product.id}`}>编辑</Link>
					</td>
				</tr>
			)
		});
		
		return (
			<div id="page-wrapper">
				<PageTitle title='商品管理'>
					<div className="page-header-right">
						<Link className="btn btn-primary" to="/product/save">
							<i className="fa fa-plus"></i>
							<span>添加商品</span>
						</Link>
					</div>
					
				</PageTitle>
				
				<ListSearch search={(searchType,searchKeyWord) => {this.onSearch(searchType,searchKeyWord)}}
							optionalType={optionalType}/>
				
				<TableView theaders={['id','信息','价格','状态','操作']} >
					{tbodyList}
				</TableView>
				
				{this.state.list.length > 0 
					? <Pagination 
						onChange={page => {this.onChangePagination(page)}}  
						current={this.state.pageNum}  
						total={this.state.total} /> 
						
					: ''
				}
			</div>
		)
	}
}

export default ProductList;